<template>
  <view class="natice-item" @click="open(item?.id)">
    <view class="natice-item-left">
      <img src="../../../static/message/notice.png" />
      <view class="bag" v-if="item?.flag === false"></view>
    </view>
    <view class="natice-item-center">
      <view class="natice-item-center-title">{{ item?.title }}</view>
      <view class="natice-item-center-content">{{ item?.content }}</view>
    </view>
    <view class="natice-item-right"> {{ getTimeDifference(item?.time) }} </view>
  </view>
  <uni-popup
    ref="popup"
    type="center"
    mask-background-color="rgba(0, 0, 0, 0.7)"
    :is-mask-click="false"
  >
    <view class="popup-natice">
      <view class="popup-natice-main">
        <view class="popup-natice-main-ty">消息通知</view>
        <view class="popup-natice-main-title">{{ item?.title }}</view>
        <view class="popup-natice-main-content">{{ item?.content }}</view>
      </view>
      <view class="popup-natice-opterion" @click="close"
        ><img src="@/static/message/close.png" alt=""
      /></view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Popup } from '@/types/Popup'
import { setNoticeList } from '@/services/message/notice'
const props = defineProps({
  item: Object,
})

console.log(props.item)

const emit = defineEmits(['getData'])

const popup = ref<Popup | null>(null)

const open = (id: string) => {
  if (popup.value) {
    popup.value.open()
    setNoticeList(id)
    emit('getData')
  }
}
const close = () => {
  if (popup.value) {
    popup.value.close()
  }
}

function getTimeDifference(timeString) {
  // 将传入的时间字符串转换为 Date 对象
  const givenTime = new Date(timeString)
  const currentTime = new Date()

  // 计算时间差（单位为毫秒）
  const timeDiff = currentTime - givenTime

  // 将时间差转换为秒、分钟、小时、天、月、年
  const seconds = Math.floor(timeDiff / 1000)
  const minutes = Math.floor(seconds / 60)
  const hours = Math.floor(minutes / 60)
  const days = Math.floor(hours / 24)
  const months = Math.floor(days / 30)
  const years = Math.floor(months / 12)

  if (years > 0) {
    return `${years}年前`
  } else if (months >= 6) {
    return `半年前`
  } else if (months > 0) {
    return `${months}个月前`
  } else if (days >= 15) {
    return `半个月前`
  } else if (days > 0) {
    return `${days}天前`
  } else if (hours > 0) {
    return `${hours}小时前`
  } else if (minutes > 0) {
    return `${minutes}分钟前`
  } else {
    return `${seconds}秒前`
  }
}
</script>

<style lang="scss" scoped>
.natice-item {
  display: flex;
  justify-content: start;
  height: 130rpx;
  width: 100%;
  .natice-item-left {
    position: relative;
    box-sizing: border-box;
    // background: linear-gradient(90deg, #aed5f8, #77baf3);
    width: 100rpx;
    height: 100rpx;
    padding: 10px;
    border-radius: 50%;
    .bag {
      position: absolute;
      width: 15rpx;
      height: 15rpx;
      background-color: #f00;
      border-radius: 50%;
      right: 0;
      top: 0;
    }
  }
  .natice-item-center {
    border-bottom: 1px solid #f3eded;
    margin-left: 15px;
    height: 100%;
    .natice-item-center-title {
      padding: 5px;
      font-size: 32rpx;
      color: #313131;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 400rpx;
    }
    .natice-item-center-content {
      padding: 0 5px;
      font-size: 26rpx;
      color: #646464;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 420rpx;
    }
  }
  .natice-item-right {
    border-bottom: 1px solid #f3eded;
    height: 100%;
    font-size: 26rpx;
    color: #989898;
    text-align: right;
    width: 150rpx;
    padding: 5px;
  }
}
.popup-natice {
  position: relative;
  .popup-natice-main {
    width: 600rpx;
    height: 600rpx;
    background-color: #fff;
    border-radius: 30rpx;
    .popup-natice-main-ty {
      padding: 10px;
      font-size: 32rpx;
      color: #313131;
      text-align: center;
    }
    .popup-natice-main-title {
      padding: 10px;
      font-size: 32rpx;
      color: #313131;
      text-align: center;
    }
    .popup-natice-main-content {
      padding: 10px;
      font-size: 26rpx;
      color: #646464;
    }
  }
  .popup-natice-opterion {
    position: absolute;
    bottom: -70rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 50rpx;
    height: 50rpx;
    line-height: 40rpx;
    text-align: center;
    color: #fff;
    font-size: 30rpx;
    border-radius: 50%;
    border: 3px solid #f3eded;
  }
}
</style>
